import React from 'react';
import { Table, Tag, Space, Button, message, Form, Modal, Input } from 'antd';
import { useEffect, useState } from 'react';
import { request } from 'umi'

const List = () => {

  // 编辑
  const [propObj, setPropObj] = useState({});
  // 编辑功能的弹出框
  const EditForm = ({ visible, onCreate, onCancel }) => {
    const [form] = Form.useForm();
    return (
      <Modal
        visible={visible}
        title="编辑"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel}
        onOk={() => {
          form.validateFields().then((values) => {
            form.resetFields();
            onCreate(values);
          })
            .catch((info) => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={{
            modifier: 'public',
            index: propObj.index,
            name: propObj.name
          }}
        >
          <Form.Item name="index" label="序号">
            <Input />
          </Form.Item>
          <Form.Item name="name" label="名称">
            <Input type="textarea" />
          </Form.Item>
        </Form>
      </Modal>
    );
  };
  // 编辑功能
  const [visible_edit, setVisible_edit] = useState(false);
  const handleEdit = (id) => {
    request("http://www.young1024.com:1717/v1/table/list").then(
      (res) => {
        console.log(res);
        let obj = res.data.find(item => item._id === id);
        obj["id"] = id;
        setPropObj(obj)
        setVisible_edit(true)
      },
      (err) => { console.log(err); }
    )
  }

  //创建编辑表单功能
  const onCreate_edit = (values) => {
    console.log('Received values of form: ', values);
    const param = new URLSearchParams;
    param.append("id", propObj.id)
    param.append("index", values.index)
    param.append("name", values.name)
    request("http://www.young1024.com:1717/v1/table/update", { data: param }).then(
      (res) => {
        console.log(res);
        if (res.status === "success") {
          getData();
          message.info('添加成功');
          setVisible_edit(false);
        }
      },
      (err) => { console.log(err); }
    )
  };








  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle" >
          <Button type="primary"  onClick={() => { handleEdit(text._id) }}>
            编辑
          </Button>
          <Button type="primary" danger onClick={() => { handleDelete(text._id) }}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const [list, setList] = useState([])
  const getData = () => {
    request("http://www.young1024.com:1717/v1/table/list").then(
      (res) => {
        console.log(res);
        setList(res.data)
      },
      (err) => { console.log("失败", err); }
    )
  }
  useEffect(() => {
    getData()
  }, [])

  const handleDelete = (id) => {
    let param = new URLSearchParams;
    param.append("id", id);
    request("http://www.young1024.com:1717/v1/table/del", { data: param }).then(
      (res) => {
        if (res.status === "success") {
          getData()
          message.info('删除成功');
        }
      },
      (err) => {
        console.log(err);
      }
    )
  }


  return (
    <div style={{ padding: "20px 60px", height: "100%" }}>
      <Table columns={columns} dataSource={list} rowKey={record => record._id} />
      <EditForm
        visible={visible_edit}
        onCreate={onCreate_edit}
        onCancel={() => {
          setVisible_edit(false);
        }}
      />
    </div>
  );
}

export default List;
